<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML作业16-多行或多列子元素的对齐属性</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}

.box1 {
	width: 400px;
	height: 400px;
	background-color: rgba(208,251,0,1.00);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	justify-content: flex-end;
	justify-content: center;
	justify-content: space-around;
	justify-content: space-between;
	align-items: flex-start;
	align-items: flex-end;
	align-items:stretch;
	align-items:center;
	align-content: flex-start;
	align-content: flex-end;
	align-content: center;
	align-content: space-around;
	align-content: space-between;
}
.box1 .item {
	background-color: rgba(242,9,13,1.00);
	width: 100px;
}
* {
	padding: 0;
	margin: 0;
}

.box2 {
	width: 400px;
	height: 400px;
	background-color: rgba(208,251,0,1.00);
	display: flex;
	flex-direction:column;
	flex-wrap: wrap;
	justify-content: flex-start;
	justify-content: flex-end;
	justify-content: center;
	justify-content: space-around;
	justify-content: space-between;
	align-items: flex-start;
	align-items: flex-end;
	align-items:stretch;
	align-items:center;
	align-content: flex-start;
	align-content: flex-end;
	align-content: center;
	align-content: space-around;
	align-content: space-between;
	
}
.box2 .item {
	background-color: rgba(242,9,13,1.00);
	width: 100px;
	height: 50px;
}	
</style>
</head>

<body>
	<div class="box1">
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	</div>
	<br>
	<div class="box2">
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	<div class="item">文本</div>
	
	
	
	
	
	</div>
</body>
</html>
